<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>黑龙江物联平台</title>
		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../dist/css/index_new.css" media="all">
	</head>

	<body>
			<div class="lay_right_cont_map_c d0_height_city">
				<div class="d0_city_row clearfix">
					<div class="d0_city_l fl">城市 :</div>
					<div class="d0_city_r  fl">
						<span class="action"> 五常</span>
						<span>绥化</span>
						<span>哈尔滨</span>
						<span>同江大庆</span>
						<span>海林</span>
						<span>齐齐哈尔</span>
						<span>鸡西</span>
						<span>佳木斯</span>
						<span>七台河</span>
						<span>牡丹江</span>
					</div>
				</div>
				<div class="d0_city_row  clearfix">
					<div class="d0_city_l  fl">区县 :</div>
					<div class="d0_city_r d0_qx fl">
						<span class="action"> 市辖区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
						<span>龙沙区</span>
						<span>建华区</span>
						<span>铁峰区</span>
					</div>
				</div>
				<div class="d0_city_row d0_jd  clearfix">
					<div class="d0_city_l  fl">基地 :</div>
					<select name="quiz1">
						<option value="">请选择</option>
						<option value="浙江" selected="">基地名称1</option>
					</select>
					<div class="d0_city_l  fl">地块 :</div>
					<select name="quiz2">
						<option value="">请选择</option>
						<option value="杭州">基地名称2</option>
					</select>
					<div class="d0_tq">
						<div class="d0_tqimg">

						</div>
						<div>
							<p>5~-7℃</p>
							<p>晴转多云</p>
						</div>
						<div>
							<p>空气质量：良好</p>
							<p>南风3到四级</p>
						</div>
					</div>

				</div>
			</div>
			<div class="clearfix">
				<div class="lay_right_cont_list_c fl d0_video" style="width: 68%; height: 637px;">
					<p>视频标题描述</p>
					<!--<video id="video" style="object-fit:fill" controls src="" />
					</video>-->

				</div>
				<div class="lay_right_cont_list_c d0_video fr" style="width: 22%;height: 637px;overflow-y: auto;">
					<p>视频列表</p>
					<div class="d0_video_row">
						<div class="d0_video_l fl">
							<span class="d0_video_time">
										11:20
									</span>
						</div>
						<div class="d0_video_r fr">
							<h3>草莓基地地质量检测草莓基地地质量检测</h3>
							<div class="d0_video_unm">
								<span>50</span>
							</div>
						</div>
					</div>
					<div class="d0_video_row">
						<div class="d0_video_l fl">
							<span class="d0_video_time">
										11:20
									</span>
						</div>
						<div class="d0_video_r fr">
							<h3>草莓基地地质量检测草莓基地地质量检测</h3>
							<div class="d0_video_unm">
								<span>50</span>
							</div>
						</div>
					</div>
					<div class="d0_video_row">
						<div class="d0_video_l fl">
							<span class="d0_video_time">
										11:20
									</span>
						</div>
						<div class="d0_video_r fr">
							<h3>草莓基地地质量检测草莓基地地质量检测</h3>
							<div class="d0_video_unm">
								<span>50</span>
							</div>
						</div>
					</div>
					<div class="d0_video_row">
						<div class="d0_video_l fl">
							<span class="d0_video_time">
										11:20
									</span>
						</div>
						<div class="d0_video_r fr">
							<h3>草莓基地地质量检测草莓基地地质量检测</h3>
							<div class="d0_video_unm">
								<span>50</span>
							</div>
						</div>
					</div>
					<div class="d0_video_row">
						<div class="d0_video_l fl">
							<span class="d0_video_time">
										11:20
									</span>
						</div>
						<div class="d0_video_r fr">
							<h3>草莓基地地质量检测草莓基地地质量检测</h3>
							<div class="d0_video_unm">
								<span>50</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="lay_right_cont_list_c d0_data">
				<div class="map_title">
					<p><span class="mg_0"></span>数据变化趋势</p>
					<a href="###">详细数据&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon">&#xe61a;</i></a>
				</div>
				<div class="form_element_c">
					<label for="">基地选择</label>
					<select name="">
						<option value="">全部基地</option>
					</select>
					<label class="time_check" for="">时间查询</label>
					<select name="">
						<option value="">一月</option>
					</select>
					<div class="fr">
						<button index="0" class="layui-btn layui-btn-radius layui-btn-normal data_tab_btn_one">查询统计数据</button>
						<button index="1" class="layui-btn layui-btn-radius layui-btn-primary data_tab_btn_one" style="border:1px solid #5e64f0;color:#5a60f0">
							<img src="../../images/new_index/statistic_btn_icon_03.jpg"/>
							转换成图表</button>
						<button class="layui-btn layui-btn-radius layui-btn-primary" style="border:1px solid #5e64f0;color:#5a60f0">
							<img src="../../images/new_index/statistic_btn_icon_05.jpg"/>
							导出图表</button>
					</div>
				</div>
				<div class="d0_table data_tab_wrap_one">
						<table class="layui-table" lay-even lay-skin="nob" style="margin-top:24px;">
							<thead>
								<tr>
									<th>
										<div class="align-right font-weight">月份</div>
										<div class="font-weight">地区</div>
									</th>
									<th>一月</th>
									<th>二月</th>
									<th>三月</th>
									<th>四月</th>
									<th>五月</th>
									<th>六月</th>
									<th>七月</th>
									<th>八月</th>
									<th>九月</th>
									<th>十月</th>
									<th>十一月</th>
									<th>十二月</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>哈尔滨</td>
									<td>-</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
								</tr>
								<tr>
									<td>齐齐哈尔</td>
									<td>-</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
								</tr>
								<tr>
									<td>大庆</td>
									<td>-</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
								</tr>
								<tr>
									<td>绥化</td>
									<td>-</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
								</tr>
								<tr>
									<td>大兴安岭<br>地区</td>
									<td>-</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
								</tr>
							</tbody>
						</table>
						<div id="divPage" class="div_page"></div>
					</div>

				<div id="d0_data" class="data_tab_wrap_one display_none">

				</div>
			</div>
			<div class="lay_right_cont_list_c d0_cg clearfix">
				<p>
					传感器数据
					<span class="fr">
								当前数据时间：2017-12-31  15:36
							</span>
				</p>
				<div class="d0_cg_row clearfix" style="border-bottom: 1px solid #e9eff7;margin-top: 60px;padding-bottom: 30px;">
					<div class="d0_cg_span">
						<h4>-25℃</h4>
						<span>
							     冠层下温度
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg2">
						<h4>15℃</h4>
						<span>
							     冠层下湿度
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg3">
						<h4>15℃</h4>
						<span>
							     水温
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg4">
						<h4>15℃</h4>
						<span>
							     泥温
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg5">
						<h4>7</h4>
						<span>
							    PH值
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg6">
						<h4>7℃</h4>
						<span>
							    光照度
								</span>
					</div>
				</div>
				<div class="d0_cg_row clearfix" style="padding-top: 30px;">
					<div class="d0_cg_span d0_cg7">
						<h4>15℃</h4>
						<span>
							     空气温度
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg8">
						<h4>15℃</h4>
						<span>
							     空气湿度
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg9">
						<h4>15℃</h4>
						<span>
							     二氧化碳
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg10">
						<h4>40%</h4>
						<span>
							     降雨量
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg11">
						<h4>三级</h4>
						<span>
							  风速
								</span>
					</div>
					<div class="d0_jg"></div>
					<div class="d0_cg_span d0_cg12">
						<h4>东南风</h4>
						<span>
							    风向
								</span>
					</div>
				</div>
			</div>
		<script src="../../js/jquery_1_7_min.js"></script>
		<script src="../../js/layui/layui.all.js" type="text/javascript "></script>
		<script src="../../js/echarts/echarts.min.js"></script>
		<script>
			//点击城市添加点击效果
			if(screen.width == 1920) {
				$("#d0_data").width(1590)
			} else if(screen.width == 1600) {
				$("#d0_data").width(1260)
			}
			$(function() {
				$(".d0_city_r:eq(0) span").click(function() {
					$(".d0_city_r:eq(0) span").removeClass("action");
					$(this).addClass("action");
				});
				$(".d0_city_r:eq(1) span").click(function() {
					$(".d0_city_r:eq(1) span").removeClass("action");
					$(this).addClass("action");
				})

				//detail
				detail($(".map_title"));
				//注意：导航 依赖 element 模块，否则无法进行功能性操作
				layui.use('layui-nav', function() {
					var element = layui.element();

					//…
				});
				//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
				layui.use('element', function() {
					var element = layui.element;
				});
				var echart = echarts.init(document.getElementById("d0_data"));

				var option = {
					title: {
						text: '冠层下温度趋势图',
						left: '50%',
						textAlign: 'center'
					},
					grid: {

						left: '3.5%',
						width: '94%'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#ddd'
							}
						},
						backgroundColor: 'rgba(255,255,255,1)',
						padding: [5, 10],
						textStyle: {
							color: '#7588E4',
						},
						extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
					},
					legend: {
						right: 20,
						orient: 'vertical',
						data: ['冠层下的温度']

					},
					xAxis: {
						type: 'category',
						data: ['12/21', '12/22', '12/22', '12/22', '12/22', '12/22', '12/22', '12/22', '12/22', '12/22', '12/22'],
						boundaryGap: false,
						splitLine: {
							show: false,

						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#64739f'
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14
							}
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: ['#D4DFF5']
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#64739f'
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14
							},
							formatter: '{value} °C'
						}
					},
					series: {
						name: '冠层下的温度',
						type: 'line',
						smooth: true,
						showSymbol: false,
						symbol: 'circle',
						symbolSize: 6,
						data: ['2.2', '3.4', '4', '4.3', '4.5', '4.4', '4.2', '3.9', '3.2', '2.1', '3', '3.2'],
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(199, 237, 250,0.5)'
								}, {
									offset: 1,
									color: 'rgba(199, 237, 250,0.2)'
								}], false)
							}
						},
						itemStyle: {
							normal: {
								color: '#129ef9'
							}
						},
						lineStyle: {
							normal: {
								width: 3
							}
						}
					}
				};
				//data tab
				dataTab(echart,$(".data_tab_btn_one"), $(".data_tab_wrap_one"), ".data_tab_btn", ".data_tab_wrap_one",option);
				echart.setOption(option);
			});
			//detail
			function detail(ele) {
				ele.children("a").click(function() {
					if($(this).parent().next().css("display") == "none") {
						$(this).children("i").html("&#xe619;");
						$(this).parent().next().show();
					} else {
						$(this).children("i").html("&#xe61a;");
						$(this).parent().next().hide();
					}
				})
			}
			//data tab
			function dataTab(echart,ele, wrap, btnClass, wrapClass,option) {
				ele.click(function() {
					var oIndex = $(this).attr("index");
					if(oIndex == 1) {
						wrap.eq(oIndex).show().siblings(wrapClass).hide();
						echart.setOption(option);
					} else {
						wrap.eq(oIndex).show().siblings(wrapClass).hide();
						echart.clear();
					}
					//					$(this).addClass("layui-btn-normal").siblings(btnClass).removeClass("layui-btn-normal");

				})
			}
		</script>
	</body>

</html>